<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">

      <panel-group
        :cabinetNumber="cabinetNumber"
        :userFeedbackNumber="userFeedbackNumber"
        :meterAlarmNumber="meterAlarmNumber"
        :cabnietAlarmNumber="cabnietAlarmNumber"
        :orderNumber = "orderNumber"
        :meterNumber = "meterNumber"
        :wxUserNumber = "wxUserNumber"
        :appUserNumber = "appUserNumber"
      />

      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <div style="display: flex;flex-direction: row;color: #9090d8;font-weight: 600;">
              <i class="el-icon-s-promotion"></i>
              <div style="margin-left: 5px;">充电柜分布使用概况</div>
            </div>
            <radar-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <div style="display: flex;flex-direction: row;color: #55aa7f;font-weight: 600;">
              <i class="el-icon-s-custom"></i>
              <div style="margin-left: 5px;">用户反馈总数 : {{userFeedbackNumber}}</div>
            </div>
            <pie-chart />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="chart-wrapper">
            <bar-chart />
          </div>
        </el-col>
      </el-row>

      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart/>
      </el-row>

    </div>
  </div>
</template>

<script>
import cabinet from '@/api/cabinet/cabinet.js'
import feedback from '@/api/userFeedback/feedback.js'
import meterWarning from '@/api/meter/meterWarning.js'
import cabinetWarning from '@/api/cabinet/cabinetWarning.js'
import cabinetLog from '@/api/order/cabinetLog.js'
import meter from '@/api/meter/meter.js'
import users from '@/api/system/user.js'
import LineChart from "@/components/Echarts/LineChart";
import PanelGroup from "./dashboard/PanelGroup";
import RadarChart from "@/components/Echarts/RadarChart";
import PieChart from "@/components/Echarts/PieChart";
import BarChart from "@/components/Echarts/BarChart";

export default {
  name: 'Dashboard',
  components: {
    PanelGroup,
    LineChart,
    RadarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      cabinetNumber: 0,
      userFeedbackNumber: 0,
      meterAlarmNumber: 0,
      cabnietAlarmNumber: 0,
      orderNumber: 0,
      meterNumber: 0,
      wxUserNumber: 0,
      appUserNumber: 0
    }
  },
  mounted() {
    cabinet.get().then(res => {
      this.cabinetNumber = res.totalElements;
    })
    feedback.get().then(res1 => {
      this.userFeedbackNumber = res1.totalElements;
    })
    meterWarning.get().then(res2 => {
      this.meterAlarmNumber = res2.totalElements;
    })
    cabinetWarning.get().then(res3 => {
      this.cabnietAlarmNumber = res3.totalElements;
    })
    cabinetLog.get().then(res4 => {
      this.orderNumber = res4.totalElements;
    })
    meter.get().then(res5 => {
      this.meterNumber = res5.totalElements;
    })
    users.get().then(res => {
      this.wxUserNumber = 0;
      res.content.forEach(item => {
        if(item.dept.id == 100000){
          this.wxUserNumber++;
        }else this.appUserNumber++;
      })
    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
